<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>运动之道</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="failback.css" />
    <link rel="stylesheet" href="logo.css" />
    <!-- <script
      src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
      integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04"
      crossorigin="anonymous"
    ></script> -->
  </head>
  <body>
    <header class="site-header">
      <!-- <div class="logo">
        <img src="./logo.png" alt="健身养生网站Logo" title="健身养生网站" />
      </div> -->
      <h1>运动之道</h1>
      <nav>
        <ul>
          <li><a href="index.html">首页</a></li>
          <!-- <li><a href="workouts.html">锻炼计划</a></li>
          <li><a href="nutrition.html">饮食百科</a></li> -->
          <li><a href="#contact">联系作者</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="welcome">
        <h2>欢迎来到运动之道</h2>
        <p>
          在这里，我们一起学习古往今来的海内外健身养生方法和健康生活方式。一起塑造更好的自己！
        </p>
      </section>
      <section class="popular-workouts">
        <h2>热门运动</h2>
        <!-- <div class="workout">
          <img src="squat.jpg" alt="深蹲" />
          <h3>深蹲</h3>
          <p>深蹲是一种全身性的锻炼方式，可以增强腿部和臀部肌肉的力量。</p>
        </div> -->
        <div class="card" style="width: 100%; margin-bottom: 15px">
          <img src="squat.jpg" class="card-img-top" alt="..." />
          <div class="card-body">
            <h5 class="card-title">深蹲</h5>
            <p class="card-text">
              深蹲是一种全身性的锻炼方式，可以增强腿部和臀部肌肉的力量。
            </p>
            <a href="./pages/shendun.html#vido" class="btn btn-primary"
              >视频学习</a
            >
            <a href="./pages/shendun.html#detail" class="btn btn-primary"
              >方法介绍</a
            >
            <a href="./pages/shendun.html#precautions" class="btn btn-primary"
              >注意事项</a
            >
          </div>
        </div>
        <div class="card" style="width: 100%">
          <img src="squat.jpg" class="card-img-top" alt="..." />
          <div class="card-body">
            <h5 class="card-title">八段锦</h5>
            <p class="card-text">
              深蹲是一种全身性的锻炼方式，可以增强腿部和臀部肌肉的力量。
            </p>
            <a href="./pages/shendun.html#vido" class="btn btn-primary"
              >视频学习</a
            >
            <a href="./pages/shendun.html#detail" class="btn btn-primary"
              >方法介绍</a
            >
            <a href="./pages/shendun.html#precautions" class="btn btn-primary"
              >注意事项</a
            >
          </div>
        </div>
        <!-- 更多锻炼计划 -->
      </section>
    </main>
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-col footer-about">
          <h3>关于我们</h3>
          <p>
            健身之道是一家专注于健康生活的网站，致力于提供最优质的锻炼和营养建议。健身之道是一家专注于健康生活的网站，致力于提供最优质的锻炼和营养建议。
          </p>
        </div>
        <div class="footer-col footer-links">
          <h3>链接</h3>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">锻炼计划</a></li>
            <li><a href="#">营养指导</a></li>
            <li><a href="#">社区交流</a></li>
          </ul>
        </div>
        <div class="footer-col footer-contact" id="contact">
          <h3>联系方式</h3>
          <p>
            邮箱:
            <a>dingtongya@aliyun.com</a>
          </p>
          <p>电话: +1 234 567 890</p>
        </div>
        <div class="footer-col footer-newsletter">
          <h3>留言反馈</h3>
          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control"
              placeholder="输入你的想法与建议"
              aria-label="输入你的想法与建议"
              aria-describedby="basic-addon2"
            />
            <div class="input-group-append">
              <span class="input-group-text" id="basic-addon2">提交</span>
            </div>
          </div>
        </div>
      </div>
      <p class="footer-copyright">
        <span>&copy;</span> <span id="year">2023</span> <span>健身之道</span> -
        保留所有权利
      </p>
    </footer>
  </body>
</html>
